<template>
  <div>
    <div class="detail-swiper">
      <div class="detail-swiper-box">
        <swiper class="swiper">
          <block v-for="(item, index) in swipeImg" :index="index" :key="index">
            <swiper-item>
              <image :src="item.value" class="img-swipe" mode="aspectFill"/>
            </swiper-item>
          </block>
        </swiper>
        <!--<swiper>
          <swiper-item v-for="(v,index) in swipeImg" :key="index">
            <img :src="v.value" alt="" class="img-swipe">
          </swiper-item>
        </swiper>-->
      </div>
    </div>
    <!--普通商品-->
    <div v-if="types == 1">
      <div v-if="isNew == 1">
        <div class="detail-sale" >
          <div class="detail-title">
            <p style="width: 45vw;">
              <img src="/static/img/beforeSaleTime.png" alt="" style="width: 35vw;height: 5vw;margin-top: 2vw">
            </p>
            <div class="right">
              <span style="float: right;position: relative;top: -8vw;width: 43vw;left: 5vw;">距开始倒计时</span>
              <div class="detail-sale-time"  style="width: 75vw;display: inline-block;position: relative;left: 30%;top: -11vw;">
                <span>{{timeNew.day}}</span>天
                <span>{{timeNew.hour}}</span>时
                <span>{{timeNew.min}}</span>分
                <span>{{timeNew.sec}}</span>秒
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else></div>
    </div>
    <!--团购商品-->
    <div v-if="types == 2">
      <div class="detail-sale">
        <div class="detail-title">
          <p style="font-size: 25px;color: #fff;position:relative;top: -3.5vw;">团购商品</p>
          <p class="noperson" style="width:14.93vw;height:5.3vw;background:#FF9597;border-radius:4px;font-size:14px;color:#fff;text-align:center;position:relative;left:5vw;top:-4vw;">{{group.group_number}}人团</p>
          <div class="groupright">
              <span v-if="iStart == 1" style="float: right;position: relative;top: -10vw;width: 43vw;left: 5vw;" class="atTime">距开始倒计时</span>
              <span v-if="iStart == 0" style="float: right;position: relative;top: -10vw;width: 43vw;left: 5vw;" class="atTime">距结束倒计时</span>
            <div class="detail-sale-time" style="width: 75vw;display: inline-block;position: relative;left: 30%;top: -13vw;">
              <span>{{timeGroup.day}}</span>天
              <span>{{timeGroup.hour}}</span>时
              <span>{{timeGroup.min}}</span>分
              <span>{{timeGroup.sec}}</span>秒
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 限时抢购-->
    <div v-if="types == 3">
      <div v-if="limitType == 1">
        <div class="detail-sale"  style="background:linear-gradient(to right,#FFBE62,#FF966D);" id="timeLimit">
          <div class="detail-title">
            <p  style="width: 45vw;">
              <img src="/static/img/limit_time.png" alt="" style="width: 19.4vw;height: 6vw;margin-top: 1vw">
            </p>
            <div class="right">
              <span  v-if="iStart == 1"  style="float: right;position: relative;top: -8vw;width: 43vw;left: 5vw;">距开始倒计时</span>
              <span  v-if="iStart == 0"  style="float: right;position: relative;top: -8vw;width: 43vw;left: 5vw;">距结束倒计时</span>
              <div class="detail-sale-time" style="width: 75vw;display: inline-block;position: relative;left: 30%;top: -11vw;">
                <span>{{timeLimit.day}}</span>天
                <span>{{timeLimit.hour}}</span>时
                <span>{{timeLimit.min}}</span>分
                <span>{{timeLimit.sec}}</span>秒
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <div class="detail-sale"  style="background:linear-gradient(to right,#FFBE62,#FF966D);">
          <div class="detail-title">
            <p style="width: 45vw;">
              <img src="/static/img/limit.png" alt="" style="width: 13.4vw;height: 6vw;margin-top: 1vw;float: left;">
              <span style="font-size: 26px;color: #fff;float: left;margin:-2vw 2vw 0 2vw;" id="buyLimit">{{buyLimit}}</span>
              <img src="/static/img/jian.png" alt=""
                   style="width: 6.4vw;height: 6vw;margin-top: 1vw;float: left;">
            </p>
            <div class="limitRight" style="position:relative;top: 6vw;">
              <span  v-if="iStart == 1" style="float: right;position: relative;top: -8vw;width: 43vw;left: 5vw;">距开始倒计时</span>
              <span  v-if="iStart == 0" style="float: right;position: relative;top: -8vw;width: 43vw;left: 5vw;">距结束倒计时</span>
              <div class="detail-sale-time" style="width: 75vw;display: inline-block;position: relative;left: 30%;top: -15vw;">
                <span>{{timeLimit.day}}</span>天
                <span>{{timeLimit.hour}}</span>时
                <span>{{timeLimit.min}}</span>分
                <span>{{timeLimit.sec}}</span>秒
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--双十二活动商品-->
    <div v-if="types == 6" >
      <div>
        <div class="detail-sale" >
          <div class="detail-title">
            <div style="font-family:'站酷快乐体' !important;width: 45vw;">
              <p v-if="iStart == 1" style="font-size: 12px;"><span style="font-size: 19px;">{{goodsInfo.activity_name}}</span>开启倒计时：</p>
              <p v-if="iStart == 0" style="font-size: 12px;"><span style="font-size: 19px;">{{goodsInfo.activity_name}}</span>结束倒计时：</p>
            </div>
            <div class="right">
              <div class="detail-sale-time" id="activPosi"  style="width: 75vw;display: inline-block;position: relative;left: 30%;top: -7vw;">
                <span>{{timeActivity.day}}</span>天
                <span>{{timeActivity.hour}}</span>时
                <span>{{timeActivity.min}}</span>分
                <span>{{timeActivity.sec}}</span>秒
              </div>
            </div>
            <!--<span>{{goodsInfo.time | moment | timeSec}}</span>秒</div>-->
          </div>
        </div>
      </div>
    </div>
    <!--预售商品-->
    <div v-else-if="presale == 1">
      <div class="presaleBox">
        <div class="left">
          <img src="/static/img/presale.png" alt="">
        </div>
        <div class="right">{{goodsInfo.presale}}</div>
      </div>
    </div>
    <!--价格-->
    <div class="detail-price">
      <div class="detail-prices" v-if="types == 6">
        <p><span style="font-size: 20px;color: #ff5230;">￥{{goodsInfo.sale_price}}</span></p>
        <p><span style="text-decoration: line-through;color: #999;font-size: 12px;">￥{{goodsInfo.line_price}}</span></p>
        <p v-if="iStart == 1" style="float: right;">
          <span style="float: right;color: #666;" v-html="goodsInfo.activity_title"></span>
        </p>
        <p v-if="iStart == 0" style="float: right;">
          <span style="float: right;color: #666;font-size: 13px;">销量：{{goodsInfo.sales}}</span>
        </p>
      </div>
      <div class="detail-prices" v-else>
        <p><span style="font-size: 20px;color: #ff5230;">￥{{goodsInfo.sale_price}}</span></p>
        <p><span style="text-decoration: line-through;color: #999;font-size: 12px;">￥{{goodsInfo.line_price}}</span></p>
        <p style="float: right;"><span style="float: right;color: #666;font-size: 13px;">销量：{{goodsInfo.sales}}</span></p>
      </div>
    </div>
    <div class="detail-member-wrap">
      <p style="width: 90%;margin: 0px auto;color: #353535;font-size: 15px;">{{goodsInfo.goods_name}}</p>
      <div class="detail-member"  v-if="goodsInfo.is_vip === 1">
        <div class="detail-member_card">
          <div>
            <div class="detail-member-title">
              <span class="vip_server">会员服务</span>
              <wxParse :content="textContent"></wxParse>
              <!--<p style="float: left;margin-left: 2vw;" v-html="goodsInfo.member_tip"></p>-->
              <a href="javascript:;" class="detail-member_go" style="float: right;margin-right: 2vw;">
              </a>
            </div>
          </div>
        <!--  <div v-else>
           &lt;!&ndash; <div class="detail-member-title">
              <span class="vip_server">会员服务</span>
              <p style="float: left;margin-left: -12vw;margin-top:2vw;">
                <wxParse :content="textContent"></wxParse></p>
              &lt;!&ndash;<p style="float: left;margin-left: -12vw;" v-html="goodsInfo.member_tip"></p>&ndash;&gt;
              <a href="" class="detail-member_go" style="float: right;margin-right: 2vw;">
                <span @click="routerTo">开通会员</span>
                <i class="iconfont">&gt;</i>
              </a>
            </div>&ndash;&gt;
          </div>-->
        </div>
        <!--<p v-if="goodsInfo.description">{{goodsInfo.description}}</p>-->
        <div class="detail-saled">
          <ul>
            <li v-for="(v,i) in promise" :key="i">
              {{v.value}}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  //import { Dialog } from 'vant'
  import wxParse from 'mpvue-wxparse'
  export default {
    name: "products",
    props:['goodsType','goodsInfo','swipeImg','promise','time','isNew','types','limit','group',
      'limitType','buyLimit','presale','activity',"respon",'textContent'],
    components: {
      wxParse
    },
    data() {
      /*vm :this;*/
      return {
        date: '',
        seconds: '',
        dayDiff:'',
        timer:'',
        timeLimit: {
          day: null,
          hour: null,
          min: null,
          sec: null
        },
        timeNew: {
          day: null,
          hour: null,
          min: null,
          sec: null
        },
        timeGroup: {
          day: null,
          hour: null,
          min: null,
          sec: null
        },
        timeActivity:{
          day: null,
          hour: null,
          min: null,
          sec: null
        },
        iStart:1,
      }
    },
    updated(){
     /* if (this.types == 1){
        this.settimer;
      } else if (this.types == 2) {
        this.setGroupTime;
      }else if (this.types == 3) {
        this.setLimitTime;
      }else if (this.types == 6) {
        this.setActivityTimer
      }*/
    },
    methods:{
      settimer: function () {
        let that = this;
        setInterval(()=> {
          let dateEnd = new Date(that.goodsInfo.new_time * 1000);
          that.dateNow = new Date();
          let surplusTime = dateEnd.getTime() - that.dateNow.getTime();
          if (surplusTime<0) {
            that.timeNew.day = 0;
            that.timeNew.hour = 0;
            that.timeNew.min = 0;
            that.timeNew.sec = 0;
          }else{
            that.timeNew.day = Math.floor(surplusTime / 1000 / 24 / 3600);
            that.timeNew.hour = Math.floor((surplusTime - that.timeNew.day * 1000 * 24 * 3600) / 1000 / 3600);
            that.timeNew.min = Math.floor((surplusTime - that.timeNew.day * 1000 * 24 * 3600 - that.timeNew.hour * 1000 * 3600) / 1000 / 60);
            that.timeNew.sec = Math.floor((surplusTime - that.timeNew.day * 1000 * 24 * 3600 - that.timeNew.hour * 1000 * 3600 - that.timeNew.min * 1000 * 60) / 1000)
          }
        }, 200)
      },
      setActivityTimer: function () {
        let that = this;
        setInterval(()=> {
          let dateEnd = new Date(that.activity.end_time*1000);
          that.dateNow = new Date();
          /*var surplusTime = dateEnd.getTime() - that.dateNow.getTime();*/
          let dateStart = new Date(that.activity.start_time*1000);
          let useTime = dateStart.getTime() - that.dateNow.getTime();
          if (useTime>0) {
            that.iStart = 1;
            var surplusTime = dateStart.getTime() - that.dateNow.getTime();
          }else{
            that.iStart = 0;
            var surplusTime = dateEnd.getTime() - that.dateNow.getTime();
          }
          if (surplusTime<0) {
            that.timeActivity.day = 0;
            that.timeActivity.hour = 0;
            that.timeActivity.min = 0;
            that.timeActivity.sec = 0;
          }else{
            that.timeActivity.day = Math.floor(surplusTime / 1000 / 24 / 3600);
            that.timeActivity.hour = Math.floor((surplusTime - that.timeActivity.day * 1000 * 24 * 3600) / 1000 / 3600);
            that.timeActivity.min = Math.floor((surplusTime - that.timeActivity.day * 1000 * 24 * 3600 - that.timeActivity.hour * 1000 * 3600) / 1000 / 60);
            that.timeActivity.sec = Math.floor((surplusTime - that.timeActivity.day * 1000 * 24 * 3600 - that.timeActivity.hour * 1000 * 3600 - that.timeActivity.min * 1000 * 60) / 1000)
          }
        }, 200)
      },
      setLimitTime: function () {
        let that = this;
        setInterval(()=> {
          let dateEnd = new Date(that.limit.end_time*1000);
          that.dateNow = new Date();
          let dateStart = new Date(that.limit.start_time*1000);
          let useTime = dateStart.getTime() - that.dateNow.getTime();
          if (useTime>0) {
            that.iStart = 1;
            var surplusTime = dateStart.getTime() - that.dateNow.getTime();
          }else{
            that.iStart = 0;
            var surplusTime = dateEnd.getTime() - that.dateNow.getTime();
          }
          if (surplusTime<0) {
            /*$("#timeLimit").css('background','linear-gradient(to right,#FF427C,#FF3535)');*/
            that.timeLimit.day = 0;
            that.timeLimit.hour = 0;
            that.timeLimit.min = 0;
            that.timeLimit.sec = 0;
          }else{
            that.timeLimit.day = Math.floor(surplusTime / 1000 / 24 / 3600);
            that.timeLimit.hour = Math.floor((surplusTime - that.timeLimit.day * 1000 * 24 * 3600) / 1000 / 3600);
            that.timeLimit.min = Math.floor((surplusTime - that.timeLimit.day * 1000 * 24 * 3600 - that.timeLimit.hour * 1000 * 3600) / 1000 / 60);
            that.timeLimit.sec = Math.floor((surplusTime - that.timeLimit.day * 1000 * 24 * 3600 - that.timeLimit.hour * 1000 * 3600 - that.timeLimit.min * 1000 * 60) / 1000)
          }
        }, 200)
      },
      setGroupTime: function () {
        let that = this;
        setInterval( ()=> {
          let dateEnd = new Date(that.group.end_time*1000);
          let dateStart = new Date(that.group.start_time*1000);
          that.dateNow = new Date();
          let useTime = dateStart.getTime() - that.dateNow.getTime();
          if (useTime>0) {
            this.iStart = 1;
            var surplusTime = dateStart.getTime() - that.dateNow.getTime();
          }else{
            this.iStart = 0;
            var surplusTime = dateEnd.getTime() - that.dateNow.getTime();
          }
          if (surplusTime<0) {
            that.timeGroup.day = 0;
            that.timeGroup.hour = 0;
            that.timeGroup.min = 0;
            that.timeGroup.sec = 0;
          }else{
            that.timeGroup.day = Math.floor(surplusTime / 1000 / 24 / 3600);
            that.timeGroup.hour = Math.floor((surplusTime - that.timeGroup.day * 1000 * 24 * 3600) / 1000 / 3600);
            that.timeGroup.min = Math.floor((surplusTime - that.timeGroup.day * 1000 * 24 * 3600 - that.timeGroup.hour * 1000 * 3600) / 1000 / 60);
            that.timeGroup.sec = Math.floor((surplusTime - that.timeGroup.day * 1000 * 24 * 3600 - that.timeGroup.hour * 1000 * 3600 - that.timeGroup.min * 1000 * 60) / 1000)
          }
        }, 200)
      },
      alertLog(){
        Dialog.confirm({
          message: '是否前往App操作'
        }).then(() => {
          //window.location.href="http://www.napin.com/download.html"
        }).catch(() => {

        });
      },
      vip(){
       // window.location.href="http://www.napin.com/download.html"
      },
      routerTo(){
        wx.showToast({
          title:'该功能暂未开放，敬请期待~',
          icon:'none',
          duration:1500,
        })
      }
    },
    created(){
    },
    computed:{

    },
    mounted () {
      if (this.types === 1){
        this.settimer();
      } else if (this.types === 2) {
        this.setGroupTime();
      }else if (this.types === 3) {
        this.setLimitTime();
      }else if (this.types === 6) {
        this.setActivityTimer()
      }
      var _this = this;
      this.timer = setInterval(function(){
        _this.value = new Date();
      },1000)
    },
    beforeDestroy () {
      if (this.timer) {
        clearInterval(this.timer)
    }
    },
  }
</script>

<style scoped lang="scss">
  .presaleBox{
    width: 100vw;
    height: 16vw;
    .right{
      width: 68vw;
      height: 100%;
      background: linear-gradient(to right,#FFBE62,#FF5353);
      float: right;
      font-size: 18px;
      color: #fff;
      text-align: center;
      line-height: 16vw;
    }
    .left{
      width: 32vw;
      height: 100%;
      float: left;
      background-color: #FFF25C;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      padding-top: 5vw;
      img{
        width: 22vw;
        height: 5.5vw;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin-left: 4.5vw;
      }
    }
  }
  @media screen and (min-width: 359px) and (max-width: 375px){
    .detail-sale .detail-title .groupright{
      top: -6.9vw !important;
      position: relative;
    }
    .bottoms .salePrece{
      right: 8vw !important;
    }
  }
  @media screen and (min-width: 410px) and (max-width: 415px){
    #activPosi{
      top: -9vw !important;
    }
  }
  @media screen and (min-width: 360px) and (max-width: 365px){
    #activPosi{
      top: -16vw !important;
    }
  }
  @media screen and (min-width: 320px) and (max-width: 359px){
    .detail-sale .detail-title .right{
      top: -4.9vw !important;
    }
    .detail-sale .detail-title .groupright{
      top: -7.9vw !important;
      position: relative;
    }
    .limitRight{
      top: 6vw;
    }
    #activPosi{
      top: -6vw !important;
    }
  }
  @media screen and (min-width:410px) and (max-width: 414px){
    .right{
      top: 0.1vw !important;
    }
  }
  @media screen and (min-width: 375px) and (max-width: 410px){
    .detail-sale .detail-title .right{
      top: -2.9vw !important;
    }
    .detail-sale .detail-title .groupright{
      top: -5.9vw !important;
      position: relative;
    }
    .limitRight{
      top: 6vw;
    }
    .detail-member-wrap .detail-member .detail-member_card .detail-member-title .vip_server{
      top:2vw !important;
    }
      #buyLimit{
      margin-top: -1vw !important;
    }
  }
  @media screen and (min-width: 411px) and (max-width: 414px){
    #buyLimit{
      margin-top: -1vw !important;
    }
    .limitRight{
      top: 6vw;
    }
    .detail-sale .detail-title .groupright{
      top: -5.9vw !important;
      position: relative;
    }
  }
  @media screen and (min-width: 414px){
    .detail-sale .detail-title .right{
      top: -2.4vw !important;
    }
    .detail-sale .detail-title .groupright{
      top: -5.9vw !important;
      position: relative;
    }
    .atTime{
      left: 7vw !important;
    }
    .limitRight{
      top: 6vw;
    }
    #buyLimit{
      margin-top: -1vw !important;
    }
  }
  @font-face {
    font-family: 'iconfont';  /* project id 861873 */
    src: url('//at.alicdn.com/t/font_861873_t78yjy88oh.eot');
    src: url('//at.alicdn.com/t/font_861873_t78yjy88oh.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_861873_t78yjy88oh.woff') format('woff'),
    url('//at.alicdn.com/t/font_861873_t78yjy88oh.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_861873_t78yjy88oh.svg#iconfont') format('svg');
  }
  $white: #fff;
  .detail-swiper {
    width: 100vw;
    height:100vw;
    background: $white;
    .detail-swiper-box {
      width: 100%;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
      height: 100%;
      .swiper{
        height: 100%;
      }
      .img-swipe{
        width: 100%;
        height: 100%;
      }
      > .van-swipe-item {
        width: 100% !important;
        overflow: hidden;
      }
      .detail-clean {
        position: absolute;
        bottom: .625rem;
        right: .6875rem;
        width: 3.75rem;
        height: 1.5625rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: .3125rem;
        border: 1px solid #666;
        font-size: .8125rem;
        color: #666;
      }
    }
  }
  .detail-price {
    width: 100%;
    height: 7vw;
    line-height: 7vw;
    background: $white;
    margin-top: 5vw;
    margin-bottom: 2vw;
    .detail-prices {
      width: 90%;
      height: 100%;
      margin: 0 auto;
      p {
        float: left;
      }
    }
  }
  .detail-sale {
    width: 100%;
    height: 18vw;
    background: linear-gradient(to right,#FFBE62,#FF5353);
    //background: #ff4c50;
    color: $white;
    display: flex;
    align-items: center;
    .detail-title {
      width: 90%;
      height: 57%;
      margin: 0 auto;
      .right{
        position:relative;
        top:6.1vw;
      }
      > p {
        font-size: 25px;
        font-family:"站酷快乐体" !important;
        color: #FEFED5;
      }
      .detail-sale-time {
        /*display: flex;*/
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: 13px;
        margin-top: 4vw;
        div{
          display: flex;
          text-align: center;
          justify-content: center;
          margin-top: 2vw;
        }
        p{
          display:block;
          width:100%;
          height:50%;
          float: left;
          text-align: center;
        }
        > span {
          width: 5vw;
          height:4vw;
          display: inline-block;
          line-height: 4vw;
          text-align: center;
          background: $white;
          color: #FF5151;
          font-size:11px;
          color: #FF5151;
          margin-right:1vw;
          &:nth-last-of-type(2) {
            margin-left: .3125rem;
            color: #FF5151;
          }
          &:nth-last-of-type(3) {
            margin-left: .3125rem;
            color: #FF5151;
          }
          &:nth-last-of-type(4) {
            margin-left: .3125rem;
            color: #FF5151;
          }
        }
      }
    }
  }
  .detail-member-wrap {
    width: 100%;
    height: auto;
    background: $white;
    .detail-member {
      width: 92%;
      margin: 0 auto;
      padding-top:25px;
      .detail-member_card {
        width: 92vw;
        height: 9.6vw;
        background:linear-gradient(to right,#FDFFCD,#FFEBBB);
        color: #FF4C50;
        display: flex;
        align-items: center;
        font-size: 13px;
        line-height: 9.6vw;
        border-radius: 7px;
        margin-bottom: 2vw;
        .detail-member-title {
          /*width: 94%;*/
          width: 92vw;
          margin: 0 auto;
          display: flex;
          color: #FF4C50;
          font-size: 13px;
          justify-content: space-between;
          .vip_server{
            width: 16vw;
            height: 4.7vw;
            font-size: 10px;
            -webkit-border-radius: 9px;
            -moz-border-radius: 9px;
            border-radius: 9px;
            color: #333333;
            line-height: 4.7vw;
            text-align: center;
            background: #FFE7A8;
            margin-left: 4vw;
            margin-top: .5vw;
            position:relative;
            top:2vw;
          }
          > a {
            color: #FF4C50;
            display: flex;
            font-size: 13px;
            align-items: center;
            > .iconfont {
              font-size: 33.25rpx;
            }
          }
        }
      }
      > p {
        &:first-of-type {
          font-size: .9375rem;
          color: #353535;

        }
        &:last-of-type {
          font-size: .6875rem;
          color: #666;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          margin-top: .625rem;
          margin-bottom: .9375rem;
        }
      }
      .detail-saled {
        width: 100%;
        ul {
          width: 100%;
          display: flex;
          justify-content: space-between;
          li {
            color: #999;
            font-size: 11px;
          }
        }
      }
    }
  }
</style>
